<template>
	<view class="navbar-container" :style="{ paddingTop: top + 'rpx' }">
		<!-- 标题区：用uni-transition包裹，显隐过渡 -->
		<uni-transition :mode-class="modeClass" customClass="transition" :show="showup">
			<view class="navbar-title-area">
				<view class="nav-bar-button-left" @click="handerAddress">
					<uni-icons type="location" size="20" color="#fff"></uni-icons>
					<text class="uv-line-1">{{leftText}}></text>
				</view>
			<!-- 	<view class="nav-bar-title">{{ pageTitle || '邻里商城' }}</view> -->
				<view class="nav-bar-button-right" v-if="isAdmin" >
					<uni-icons type="gear" size="26" color="#ffffff" @click.stop="rightBtn"></uni-icons>
					<pop-menu :showMenu="showMenu" :menuList="rightMenu"  @update:showMenu="val => showMenu = val" @menu-click="handleMenuClick"></pop-menu>
				</view>
			</view>
		</uni-transition>

		<!-- 搜索区：动态计算top值，避免重叠和吸顶 -->
		<view
			class="search-box"
			:style="{
				top: showup ? top + titleHeight + 'rpx' : top + 'rpx'
			}"
		>
			<view
				class="navbar-search-area"
				@click="handleSearch"
				:style="{
					transform: !showup ? 'scale(0.95)' : 'scale(1)'
				}"
			>
				<view class="icon"><uni-icons type="search" size="28" color="#999"></uni-icons></view>
				<view class="input">搜索商品</view>
				<view class="btn">搜索</view>
			</view>
		</view>
	</view>
</template>

<script>
	import popMenu from './popMenu.vue';
export default {
	name: 'shopNavbar',
	components:{
		popMenu
	},
	props: {
		pageTitle: { type: String, default: '邻里商城' },
		isAdmin: { type: Boolean, default: false },
		showup: { type: Boolean, default: true }
	},
	data() {
		return {
			isEdit: false,
			top: 0, // 安全区域顶部（rpx）
			titleHeight: 88, // 标题区固定高度（rpx），与样式中.navbar-title-area的height一致
			modeClass: ['fade', 'slide-top'],
			leftText:"未选择定位",
			rightMenu:[{label:'管理商品'}],
			showMenu:false
		};
	},
	mounted() {
		this.leftText=this.address||'未选择位置'
		uni.$on('selectAddress',res=>{
			console.log('.....',res);
			this.leftText=res.title?res.title:res.poiName||'位置不明'
		 
		}) 
		
		try {
			const res = this.$store.state.msg.systemInfo;
			const safeTop = res.safeArea?.top || 20; // 安全区域顶部（px）
			this.top = safeTop * (750 / res.windowWidth); // 转为rpx
		} catch (e) {
			console.error('获取设备信息失败：', e);
			this.top = 20; // 异常时兜底（rpx）
		}
	},
	computed: {
		address() {
			const fullAddress = this.$store.state.msg.address.address || '';
			return fullAddress.length > 7 ? fullAddress.slice(-15).replace(/[()（）【】\[\]{}<> ,，.。]/g, '') : fullAddress;
		}
	},
	destroyed() {
		uni.$off('selectAddress')
	},
	methods: {
		handerAddress() {
			uni.navigateTo({
				url: '/pages/myAddress/myAddress?action=selec'
			});
		},
		rightBtn() {
	        console.log('1');
			this.showMenu=!this.showMenu
			//this.$emit('edit-status-change', this.isEdit);
		},
		handleMenuClick(e){
			switch(e){
				case"edit":	this.$emit('edit-status-change', this.isEdit);break;
				
			}
		},
		handleSearch() {
			uni.navigateTo({ url: '/pages/searchGood/searchGood' });
		}
	}
};
</script>

<style lang="scss" scoped>
.navbar-container {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	z-index: 1000;
	background-color: #00aaff;
	box-sizing: border-box;
	/* 移除固定min-height，由内容自动撑开 */
}

/* 标题区：固定高度88rpx，与data中的titleHeight一致 */
.navbar-title-area {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 88rpx; /* 与titleHeight绑定 */
	padding: 0 20rpx;
	box-sizing: border-box;
}

.nav-bar-button-left {
	max-width: 500rpx; /* 固定死宽度，无论内容多长都不扩展 */
	height: 88rpx; /* 与标题区同高，确保垂直居中 */
	display: flex;
	padding: 10rpx 0;
	
	align-items: center;
	padding-left: 20rpx; /* 仅左侧留白，不影响右侧 */
	box-sizing: border-box; /* 确保width包含padding */
	font-size: 30rpx;
	font-weight: bolder;
	color: #fff;

	transition: background-color 0.2s ease;
	&:active {
		background-color: rgba(255, 255, 255, 0.3);
	}
}

.nav-bar-button-right {
	width: 180rpx; /* 与左侧宽度一致，保持对称 */
	height: 88rpx; /* 与标题区同高 */
	display: flex;
	position: relative;
	align-items: center;
	justify-content: flex-end; /* 内容右对齐 */
	padding-right: 20rpx; /* 仅右侧留白 */
	box-sizing: border-box;
	margin-left: auto; /* 推到最右侧 */
	transition: background-color 0.2s ease;
	&:active {
		background-color: rgba(255, 255, 255, 0.3);
	}
}

.nav-bar-title {
	display: flex;
	align-items: center;
	justify-content: center; /* 水平居中 */
	font-size: 36rpx;
	font-weight: 500;
	width: 200rpx;
	margin-left: auto;
	margin-right: auto;
	color: #fff;
	overflow: hidden;
	text-overflow: ellipsis;
/* #ifndef APP-PLUS-NVUE */
					white-space: nowrap;
				/* #endif */
	padding: 0 20rpx; /* 左右预留空间，避免被左右按钮遮挡 */
	box-sizing: border-box;
}

/* 搜索区：相对于父容器定位，避免重叠 */
.search-box {
	position: absolute; /* 相对于.navbar-container定位 */
	width: 100%;
	background-color: #55aaff;
	box-sizing: border-box;
	padding: 5rpx 30rpx; /* 左右留白，避免搜索框贴边 */
}

.navbar-search-area {
	display: flex;
	align-items: center;
	height: 70rpx;
	width: 100%; /* 占满父容器宽度（配合padding） */
	background-color: #fff;
	border-radius: 40rpx;
	box-sizing: border-box;
	padding: 0 20rpx;
	transition: transform 0.3s ease; /* 仅保留缩放动画 */
}

.icon {
	padding: 0 10rpx;
}

.input {
	flex: 1;
	font-size: 28rpx;
	color: #999;
}

.btn {
	padding: 0 20rpx;
	height: 50rpx;
	line-height: 50rpx;
	text-align: center;
	font-size: 28rpx;
	color: #fff;
	background-color: #55aaff;
	border-radius: 25rpx;
	margin-left: 10rpx;
	white-space: nowrap;
}

/* 标题区过渡动画 */
.transition-enter-active,
.transition-leave-active {
	transition: opacity 0.3s ease, transform 0.3s ease;
}
.transition-enter,
.transition-leave-to {
	opacity: 0;
	transform: translateY(-20rpx);
}
</style>
